<template>
	<div class="table-contain-inner">
		<p>生成的Excel样式<span class="remark-text">(灰色为隐藏项)<span class="error-remark-text">(建议不要超过8列)</span></span>：</p>
		<goalExcelTb style="margin-bottom: 30px;" :data="titles_on_data"></goalExcelTb>
		
		<div class="table-operate-area">
			<el-button type="primary" style="margin-right: 1%;padding: 0 46px;" @click="addTitle">添加</el-button>
			<el-input class="search-input" v-model="search_val" placeholder="按标题搜索" @keydown.native.13="searchHandle">
				<template slot="append">
					<div class="search-append-div" @click="searchHandle">
						<i class="el-icon-search"></i>
					</div>
				</template>
			</el-input>
		</div>
		<el-table row-key="id_key" @filter-change="filterChangeHandle" v-loading="tb_loading" @sort-change="sortChangeHandle" :data="titles_data">
			<el-table-column
	      label="key"
	      prop="idKey">
	    </el-table-column>
	    <el-table-column
	      label="标题"
	      prop="label">
	    </el-table-column>
	    <el-table-column
	      label="权重"
	      sortable
	      prop="zIndex">
	    </el-table-column>
	    <el-table-column
	      label="添加时间"
	      sortable
	      prop="createTime">
	    </el-table-column>
	    <el-table-column
	      label="状态"
	      :filters="[{value:0,text:'禁用'},{value:1,text:'正常'},{value:2,text:'隐藏'}]"
	    	:filter-multiple="false"
	    	column-key="status"
	      prop="status">
	      <template slot-scope="scope">
	      	{{scope.row.status==0?'禁用':scope.row.status==2?'隐藏':'正常'}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      label="备注"
	      :show-overflow-tooltip="true"
	      prop="remark">
	    </el-table-column>
	    <el-table-column
	      label="操作">
	      <template slot-scope="scope">
	      	<el-button class="btn-resolve" type="text" @click="editTitle(scope.row)">修改</el-button>
	      	<el-button v-if="scope.row.status!=2 && scope.row.status!=0" :loading="btn_loading==scope.row.idKey+'_2'" class="btn-resolve" type="text" @click="operate(scope.row.idKey, 2)">隐藏</el-button>
	      	<el-button v-if="scope.row.status==2" type="text" :loading="btn_loading==scope.row.idKey+'_1'" class="btn-resolve" @click="operate(scope.row.idKey, 1)">显示</el-button>
	      	<el-button v-if="scope.row.status==0" type="text" :loading="btn_loading==scope.row.idKey+'_1'" class="btn-resolve" @click="operate(scope.row.idKey, 1)">启用</el-button>
	      	<el-button v-if="scope.row.status!=0" type="text" :loading="btn_loading==scope.row.idKey+'_0'" class="btn-resolve" @click="operate(scope.row.idKey, 0)">禁用</el-button>
	      </template>
	    </el-table-column>
		</el-table>
		<el-pagination background :page-sizes="[5, 10, 20]" :page-size.sync="page_size" layout="sizes, prev, pager, next, jumper" :page-count="page_total" :current-page.sync="page_no"></el-pagination>
		<p class="remark-text error-remark-text" style="margin-bottom: 5px;"><i class="el-icon-warning"></i>标题添加后不可不可删除(可禁用)，请谨慎添加</p>
		<p class="remark-text" style="margin-top: 0;margin-bottom: 5px;"><i class="el-icon-warning"></i>隐藏是指用户不可见，管理员可见并可修改</p>
		<p class="remark-text" style="margin-top: 0;"><i class="el-icon-warning"></i>权重值会影响生成Excel或数据查看时的标题顺序</p>
		<editTitle ref="edit_title_dialog" @reloadTb="reloadTbAndOn" @refreshTb="getTitleAndOn"></editTitle>
	</div>
</template>
<script>
	import goalExcelTb from 'components/admin/goal_excel_tb.vue';
	import editTitle from 'components/admin/edit_title.vue';
	export default {
		data() {
			return {
				titles_data: [],
				tb_loading: false,
				page_no: 1,
				page_total: 1,
				page_size: 10,

				search_type: 'label',
				search_val: '',

				filters: {},

				btn_loading: '',

				titles_on_data: []
			}
		},
		watch: {
			page_no() {
				this.getTitlesData();
			},
			page_size() {
				this.reloadTb();
			}
		},
		methods: {
			addTitle() {
				this.$refs.edit_title_dialog.show();
			},
			filterChangeHandle(filter) {
				let filter_key = Object.keys(filter)[0];
				if(filter_key) {
					let filter_val = filter[filter_key][0];
					if(filter_val != undefined) {
						this.filters[filter_key] = filter_val;
					}else if(this.filters[filter_key]) {
						delete this.filters[filter_key];
					}
				}
				this.reloadTb();
			},
			searchHandle() {
				if(this.search_val) {
					this.filters[this.search_type] = this.search_val;
				}else if(this.filters[this.search_type]) {
					delete this.filters[this.search_type];
				}
				this.reloadTb();
			},
			sortChangeHandle({ order, prop }) {
				if(order && prop) {
					this.filters.order_by = (prop=='createTime'?'create_time':prop=='zIndex'?'z_index':prop)+' '+(order == 'ascending' ? 'asc' : 'desc');
				}else {
					delete this.filters.order_by;
				}
				this.reloadTb();
			},
			editTitle(title) {
				title.id_key = title.idKey;
				title.z_index = title.zIndex;
				this.$refs.edit_title_dialog.show(title);
			},
			operate(id_key, status) {
				if(id_key!=undefined && status != undefined) {
					this.btn_loading = id_key+'_'+status;
					this.$axios.post('/admin/editSalaryKey', {id_key: id_key, status: status}).then(res => {
						if(res.s == 1) {
							this.$message.success('操作成功');
							this.getTitleAndOn();
						}
					}).finally(() => {
						this.btn_loading = '';
					})
				}
			},
			getTitlesData() {
				this.tb_loading = true;
				this.$axios.get(`/admin/getSalaryKey/${this.page_no}/${this.page_size}`, this.filters).then(res => {
					if(res.s == 1) {
						let res_data = res.d;
						this.titles_data = res_data.list;
						this.page_total = res_data.page_count;
						this.user_data = res_data.list;
					}
				}).finally(() => {
					this.tb_loading = false;
				})
			},
			getTitlesOnData() {
				this.$axios.get('/admin/getSalaryKeyOn').then(res => {
					if(res.s == 1) {
						this.titles_on_data = res.d;
					}
				})
			},
			getTitleAndOn() {
				this.getTitlesData();
				this.getTitlesOnData();
			},
			reloadTbAndOn() {
				this.reloadTb();
				this.getTitlesOnData();
			},
			reloadTb() {
				if(this.page_no == 1) {
					this.getTitlesData();
				}else {
					this.page_no = 1;
				}
			}
		},
		components: {
			editTitle,
			goalExcelTb
		},
		created() {
			this.getTitleAndOn();
		}
	}
</script>